<!-- 图小块大
    
    平铺
    background-repeat:repeat    平铺（铺满）
    background-repeat:no-repeat  不平铺（只有1个图）
    background-repeat:repeat-x  平铺x轴（铺满x轴）
    background-repeat:repeat-y  平铺y轴（铺满y轴）

    位置
    background-position:right, top  右上角
 -->




<!-- 图大块小
    放缩
    background-size: 70%         固定比例缩放
    background-size: 200px       固定大小
    background-size: cover       自适应缩放（图片可能显示不完，块填满）
    background-size: cotin       自适应缩放（图片显示完整，块可能填不满）
 -->




<!-- 精灵图
    通过控制背景图位置实现变化效果
    background-position: 0 -55px;       （0和-中间有空格，-55px要连着写）
-->







<!-- 媒体查询
    @media screen and (max-width: 500px){
        .div7{
            background-color: yellow;
        }
    }
-->





<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景样式</title>
    <style>
        .div1 {
            height: 500px;
            width: 500px;
            background-color: rebeccapurple;
            background-image: url(/素材/img/QQ.png);
            background-repeat: repeat;
        }

        .div2 {
            height: 500px;
            width: 500px;
            background-color: rebeccapurple;
            background-image: url(/素材/img/QQ.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .div3 {
            height: 500px;
            width: 500px;
            background-color: rebeccapurple;
            background-image: url(/素材/img/QQ.png);
            background-repeat: repeat-x;
        }

        .div4 {
            height: 500px;
            width: 500px;
            background-color: rebeccapurple;
            background-image: url(/素材/img/QQ.png);
            background-repeat: repeat-y;
        }


        .div5 {
            width: 55px;
            height: 11px;
            background-color: red;
            background-image: url(/素材/img/评星.png);
        }

        .rate4 {
            background-position: 0 -11px;
        }

        .rate3 {
            background-position: 0 -33px;
        }

        .rate2 {
            background-position: 0 -55px;
        }

        .rate1 {
            background-position: 0 -77px;
        }

        .div6 {
            width: 48px;
            height: 45px;
            background-image: url(/素材/img/侧边栏.png);
        }
        .div7{
            width: 55px;
            height: calc(50px + 50px);
            background-color: pink;
            color: rebeccapurple;
            text-align: center;
            line-height: 50px;
        }
        @media screen and (max-width: 500px){
            .div7{
                background-color: yellow;
            }
        }
    </style>
</head>

<body>
    <div class="div1">平铺</div>
    <br>
    <hr>
    <br>
    <div class="div2">不平铺</div>
    <br>
    <hr>
    <br>
    <div class="div3">平铺x轴</div>
    <br>
    <hr>
    <br>
    <div class="div4">平铺y轴</div>
    <br>
    <hr>
    <br>
    <p>评星</p>
    <div class="div5"></div>
    <hr>
    <div class="div5 rate4"></div>
    <hr>
    <div class="div5 rate3"></div>
    <hr>
    <div class="div5 rate2"></div>
    <hr>
    <div class="div5 rate1"></div>
    <br>
    <hr>
    <br>
    <div class="div6"></div>
    <br>
    <hr>
    <br>
    <div class="div7">小黑子小黑子</div>
</body>
</html>